<!DOCTYPE html>
<html ng-app="oppia">
  <head>
    <title>Oppia Admin Panel</title>

    {% include 'header_css_libs.html' %}
    {% include 'header_js_libs.html' %}
    <script>
      var GLOBALS = {
        csrf_token: JSON.parse('{{csrf_token|js_string}}')
      }
    </script>
  </head>

  <body ng-controller="Admin" ng-cloak>
    <div>
      Click <a href="/">here</a> to go to the main Oppia page.
    </div>

    <br>

    <div ng-if="message" style="background-color: lightyellow; position: fixed; width: 30%; z-index: 3000; border: 1px solid brown; right: 5px;">
      <[message]>
    </div>

    <h3>Performance Counters</h3>

    <ul>
      {% for counter in counters %}
        <li>
          {{counter.description}} : {{counter.value}}
        </li>
      {% endfor %}
    </ul>

    <h3>Configuration</h3>

    <div class="container-fluid" ng-if="isNonemptyObject(configProperties)">
      <div ng-repeat="(configPropertyId, configPropertyData) in configProperties" class="row-fluid" style="padding-bottom: 10px;">
        <span class="span2">
          <em><[configPropertyData.description]></em>
        </span>
        <span class="span4">
          <object-editor obj-type="<[configPropertyData.obj_type]>" value="configPropertyData.value"></object-editor>
        </span>
        <span class="span2">
          <button ng-click="revertToDefaultConfigPropertyValue(configPropertyId)">Revert to default</button>
        </span>
      </div>

      <button ng-click="saveConfigProperties()">Save</button>
      <button ng-click="reloadConfigProperties()">Undo changes</button>
    </div>

    <div ng-if="!isNonemptyObject(configProperties)">
      No configuration properties are available.
    </div>

    <h3>Computed configuration properties</h3>

    <div ng-if="isNonemptyObject(computedProperties)">
      <ul>
        <li ng-repeat="(computedPropertyId, computedPropertyData) in computedProperties">
          <em><[computedPropertyData.description]></em>
          <button ng-click="refreshComputedProperty(computedPropertyId)">Reload</button>
        </li>
      </ul>
    </div>

    <div ng-if="!isNonemptyObject(computedProperties)">
      No computed configuration properties are available.
    </div>

    <h3>Actions</h3>
    <h4>Reload a single exploration</h4>
    <ul>
      {% for exploration in demo_explorations %}
        <li>
          {{exploration[1]}}
          <button ng-click="reloadExploration({{exploration[0]}})">
            Reload
          </button>
        </li>
      {% endfor %}
    </ul>

    <h3>Jobs</h3>
    <em>Note: This table may be stale; refresh to see the latest state.</em>
    <h4>Existing jobs</h4>
    <table>
      <tr>
        <th>Job ID</th>
        <th>Status</th>
        <th>Time started</th>
        <th>Time finished</th>
        <th></th>
      </tr>
      {% for job in job_data %}
        <tr>
          <td>{{job['id']}}</td>
          <td>{{job['status_code']}}</td>
          <td>{{job['human_readable_time_started']}}</td>
          <td>{{job['human_readable_time_finished']}}</td>
          <td>
            {% if job['is_cancelable'] %}
              <button ng-click="cancelJob('{{job['id']}}', '{{job['job_type']}}')">
                Cancel
              </button>
            {% endif %}
          </td>
        </tr>
      {% endfor %}
    </table>

    <h4>New jobs</h4>
    <ul>
      {% for new_job_type in new_job_types %}
        <li>
          {{new_job_type}}
          <button ng-click="startNewJob('{{new_job_type}}')">
            Start new job
          </button>
        </li>
      {% endfor %}
    </ul>

    {% include 'footer_js_libs.html' %}
    {% include 'rte_js_libs.html' %}

    <script>
      {{ include_js_file('app.js') }}
      {{ include_js_file('admin/Admin.js') }}
      {{ include_js_file('directives.js') }}
      {{ include_js_file('services/warningsData.js') }}
      {{ include_js_file('components/objectEditor.js') }}
      {{ include_js_file('components/valueGeneratorEditor.js') }}
      {{ include_js_file('components/richTextEditor.js') }}
      {{ object_editors_js }}
      {{ value_generators_js }}
    </script>

    {{ widget_js_directives }}
  </body>
</html>
